<template>
    <header class="header-container">
        <span class="back-btn"></span>
        <h2>{{headerTitle}}</h2>
        <span class="share-btn"></span>
    </header>
</template>
<script>
    export default {
        props: ['headerTitle']
    }
</script>
<style lang="less">
    .header-container {
        height: 0.9rem;
        font-size: 0;
        overflow: auto;
        position: relative;
        text-align: center;
        line-height: 0.9rem;
        border-bottom: 1px solid #ccc;
        .back-btn {
            position: absolute;
            left: 0.3rem;
            width: 0.3rem;
            height: 0.3rem;
            background: url(../assets/img/back-icon.png) no-repeat;
            background-size: 100%;
            top: 50%;
            margin-top: -0.15rem;
        }
        .share-btn {
            position: absolute;
            top: 50%;
            margin-top: -0.04rem;
            right: 0.3rem;
            width: 0.4rem;
            height: 0.08rem;
            background: url(../assets/img/share-icon.png) no-repeat;
            background-size: 100%;
        }
        h2 {
            font-size: 0.34rem;
            color: #000;
        }
    }
</style>